import './login.css'
import { Input, Button,message } from 'antd';
import { useNavigate } from 'react-router-dom'
import 'antd/dist/antd.css';
import { useState } from 'react';
import { login } from '../../api/login';
const Login = () => {
    const nav = useNavigate();
    const [loginloading,setLoginloading] = useState(false)
    const onLogin = (values) => {
        setLoginloading(true);
        let opt = {};
        let username = document.querySelector('#myinput1').value;
        let password = document.querySelector('#myinput2').value;
        opt.username = username;
        opt.password = password;
        login(opt)
        .then(r => {
            console.log(r);
            if (r.status === 401) { //密码错误登录失败
                message.error('用户名或密码错误！');
                setLoginloading(false);
            }
            else{ //密码正确登录成功
                message.success('登录成功！');
                setLoginloading(false);
                r.text()
                .then(res => {
                    // console.log(res);// token
                    nav('/');
                })
            }
            
        })
        
        
    };
    return (
        <div id='Login_outer'>
            <div className='innerCon'>
                <span className={'login-text1'}>用户名：</span><Input type={'text'} placeholder={'请输入用户名'} id={'myinput1'}/>
                <span className={'login-text2'}>密码：</span><Input type={'password'} placeholder={'请输入密码'} id={'myinput2'}/>
                <Button type="primary" 
                id={'login-button'} 
                size={'large'} 
                loading={loginloading}
                onClick={onLogin}
                >登录</Button>
            </div>
        </div>

            
        
    )
}

export default Login;